<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 
    box-shadow属性可以设置一个或者多个阴影
    口每个阴影用<shadow>表示
    口多个阴影之间用逗号,隔开，从前到后叠加
    <shadow>的常见格式如下
    none l <shadow>#
    <shadow> = inset? 88 <length>(2,4) 88 <color>?
    口第1个<length>: offset-x,水平方向的偏移，正数往右偏移
    口第2个<length>: offset-y, 垂直方向的偏移，正数往下偏移
    口第3个<length>:blur-radius,模糊半径s口第4个<length>:spread-radius,延伸半径
    口 <color>: 阴影的颜色，如果没有设置，就跟随color属性的颜色
    口 inset: 外框阴影变成内框阴影 */
    .box{
        height: 100px;
        width: 100px;
        background-color: red;
        box-shadow: 5px 5px 10px 10px orange, 10px 10px 10px;
    }
</style>
<body>
    <div class="box"></div>
</body>
</html>